Luis me comentaba su deseo de añadir una barra para añadir información en la cabecera del blog. Lo haremos en unos minutos, bastará con localizar <head> en nuestra plantilla y justo antes añadir lo siguiente:


<div style='color:#1E1E1E; background-color:#B7B7B7; border-bottom: 5px dotted #B0171F; border-top: 5px dotted #1E1E1E; margin: 0 0 5px 0; padding: 4px 0; font-size: 14px;'><b> TEXTO-TEXTO-TEXTO-TEXTO-</b></div>


El anterior código lo podemos modificar a nuestro gusto respecto a:

Color de fondo: (background-color)
Tipo de borde: (border-bottom) y (border-top)
Grosor del borde: (5px)
Color de fuente: (color:)
Tamaño de fuente: (font-size)
Aquí unos ejemplos, dale rienda suelta a tu imaginación y personaliza la barra a tu gusto.



Ver tipos de borde y colores.


Anónimo

¿Y este blog de estética horrorosa pretende dar consejos y directrices sobre como mejorar un blog?

Responder
Noa

Q diver criticar poniendo "anónimo", no???

Habría q verte a ti...

Genial el post Gema, como siempre ;)

Responder
Anónimo

Ohh que interesante Gema.
Mira ando intentando cambiar de plantilla para el aniversario del blog.
Estoy trabajando en la plantilla minima pero no encuentro como poner de mayor tamano el titulo de la entrada.

Cuando lo lo hago mas grande se hacen mas grandes las del sidebar.

Me puedes ayudar .
Gracias..

Martha.

Responder
Dorian

Hola me gustaria ,si alguien me pudiera hechar una mano, tengo un problema y es que me gustaria encajar el video en el recuadro que he preparado para ello,..podeis verlo en http://www.dorianshop.blogspot.com/

el video esta insertado desde elemento de pagina como un html, ¿se puede o es algo imposible?

Muchisimas gracias ...
Un saludo.
Dorian.

Responder
Gem@

Saludos y bienvenido/a anónimo. Podría darte mil argumentos que contestarían a tu comentario pero prefiero dedicar el tiempo a contestar otros ;)

Hola Noa, a simple vista parece algo que no tiene utilidad pero no queda mal del todo si añadimos en ese espacio el enlace a nuestro mail-perfil- o a las suscripciones. Todo es darle juego y por supuesto a gusto de cada uno.
Gracias por estar ;)

Martha debes hacerlo buscando en tu plantilla: .post h3 {
Esa es la parte que modifica las entradas o post.

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

Si no tienes lo que está en negrita intenta añadirlo, cambia a un valor alto por ejemplo a 190% para ver si con ese cambio resulta bien, luego ve probando hasta dar con el tamaño de fuente que deseas ;)

Responder
Gem@

Dorian voy a ver la plantilla y te comento...

Responder
Dorian

help me!!!!

Responder
Dorian

gracias gema

Responder
Emmanuel Joven

Hola, soy Emmanuel, el creador de Unyversal Time y te invito a ti Gema a que escribas y/o modifiques HTML/Javaescript en
Bloggers Prodigiosos, de mmomento esc un blog sin nada, espero tu respuesta, porfavor contacta en mi blog ok?
tu dimelo y yo hago el resto.

Responder
Gem@

Dorian He intentado descargarme esa plantilla para probar antes de contestarte pero no localizo el lugar de la descarga. Por lo que he visto en tu blog el diseño lo componen varias imágenes añadidas a la plantilla y justo donde deseas añadir el vídeo es la imagen para las entradas.
Mi pregunta es ¿has probado añadiendo el vídeo en una entrada?

Responder
Gem@

Emmanuel no entiendo eso que me invitas a modificar el código ¿podrías ser más explícito?

Responder
Dorian

hola gema ,gracias si quieres puedo enviartela?, la parte para las entradas es donde hay dos fotos pequeñas que se amplian , y despues debajo hay otras dos divisiones , que no son para entradas son para colocar html,fotos, y toda la pesca ...he metido el video con los codigos de youtube

Responder
Anónimo

Gracias Gem@...
Me has ayudado mucho, tu blog es importante para la blogósfera, así que el comentario de "anónimo" aquí sale sobrando.

Responder
Gem@

Dorian puedes mandarla a mi correo y a ser posible la url de donde la descargaste para ver la original ;)


Gracias a ti Martha, si no funcionan las indicaciones que te he dado házmelo saber y lo intentamos de otra forma ;)

Responder
Dorian

ok ,ya te las he mandado, lo unico que he hecho en diferencia con la original es cambiar las imagenes del fondo, no se si es la forma mas adecuada de hacerlo pero es la que se me ha ocurrido...

Oye, muchisimas gracias por tu ayuda...

Responder
Dorian

http://wowtestblog.blogspot.com/

aqui puedes ver la plantilla en su origen

Responder
Anónimo

Hola Gema, soy un lector "invisible" de tu blog desde hace ya algunos días... sólo pasaba a preguntarte si donde dice "texto-texto-texto" se puede poner alguna otra cosa y texto específicamente. O sea, en esta parte del código se puede poner algún menú, pequeña imagen o algo así? Es que la vez pasada vi otra forma (en una plantilla que descargué de BTemplates), que usaba toda una nueva sección en el CSS (tipo "header-wrapper")... y ésta me parece más sencilla y fácil de manejar.

¡Saludos!

P.D.: No hace falta decirte que no tomes siquiera en cuenta al famoso anónimo, porque sólo una persona fuera de sus cabales puede dejar un comentario de esa índole.

Responder
Anónimo

Muchas gracias por el post. Y ni caso a la gente necia o envidiosa que critica lo que muy probablemente desconoce.
Le he dado un uso distinto, como estilo de una nueva sección de "Borradores" que inicio en mi blog.

Saludos

Responder
Dorian

ok gema, ya lo he solucionado.Muchas gracias .
Dorian.

Responder
Gem@

Dorian no me dio tiempo más que a instalarla :D
La imagen no es la misma, luego sospecho ... que lo solucionaste ubicando la nueva imagen para que encajara justo el vídeo ¿no?

Fernandooo1 puedes incluir imágenes y códigos tipo enlaces, y texto al menos eso es lo que yo he probado y funciona perfectamente.
Hay otra forma de añadir un espacio en la cabecera mira aquí. También es muy sencillo de aplicar.
-No me preocupan en absoluto ese tipo de comentarios viniendo de alguien que no da la cara. ;)

Hola Dreig, eso mismo... ni caso.
Voy a ver la idea que has tenido ;)

Responder
Anónimo

¡Gracias Gema!

Le echaré un ojo.

Saludos,

Responder
Gem@

Muy bien Fernando ;)

Responder
Dorian

Hola, si eso hice gema.Ahora estoy liao intentando quitar "entradas mas recientes" y tambien las Categorias pues aunque lo deshabilito , me sigue apareciendo...

Bueno a ver si consigo hacer esto sin tener que molestarte mas.

Bueno ,gracias por todo
Dorian.

Responder
Gem@

Se puede hacer eliminando el elemento una vez lo editamos y desde la plantilla, para hacerlo desde la plantilla debes buscar:
<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>

más código de las etiquetas ....

</b:widget>

Entre la línea de arriba y el código </b:widget> habrás más código, suprimiendo todo eliminas las etiquetas del blog.
Pero presta atención en no eliminar ni más ni menos que eso y mira en vista previa.
Guarda una copia de la plantilla, el trabajo que estás realizando con ella bien vale la pena no perderlo por un error ;)

Responder
fernando reyes baños

Hola Gem@: ¿Por qué quitaste el buscador dinámico de google? He intentado buscar en dos ocasiones en tu blog con el buscador que, actualmente, tienes y no he podido hallar lo que encontraba :( Buscaba, por ejemplo, el tema de crear vínculos en el post-footer, ¿podrías ayudarme please? De antemano, mil gracias!

Responder
Gem@

R.Baños, el buscador sigue ahí pero permanece oculto porque estoy tratando de añadirlo dentro de un desplegable, si tengo un poco de tiempo intentaré terminarlo luego ;)
De todas formas tengo que decirte que visualmente el buscador dinámico resulta más atractivo pero es mucho más eficaz mi buscador personal.

Lo que incluimos en el footer de las entradas se encuentra dentro de estas líneas de código:
<p class='post-footer-line post-footer-line-1'>
Contiene los datos de autor.

<p class='post-footer-line post-footer-line-2'>
Contiene las etiquetas.

<p class='post-footer-line post-footer-line-3'>
Suele emplearse para añadir marcadores sociales, entradas relacionadas y algún que otro complemento.
Lo anterior te dará una idea para añadir el vínculo ;)

Responder
Walter

Hola Gema es la primera vez que entro a tu blog y me parece muy interesante.
bueno yo recien empiezo con un blog y para mi esto es muy nuevo e interesante.
Mi pregunta es :¿Como hago para que mi blog ocupe el 100% de la pantalla? osea que ocupe todo el ancho como lo e visto en otros blogs.
gracias por tu respuesta.
areadelfutbol.blogspot.com

Responder
Gem@

Hola Walter.
Tu plantilla la puedes modificar para verla ocupando el total de la pantalla, pero eso no quiere decir que los demás la vean igual, todo depende de la resolución de pantalla que estamos usando.
¿La mía por ejemplo ocupa toda tu pantalla? te lo digo para decirte donde y como modificarla.(consiste en modificar tres o cuatro líneas de blog solamente)

O si quieres indícame algún blog de los que ves a pantalla completa ;)

Responder
Walter

Hola Gema gracias por tu respuesta es justo lo k io kiero saber en ke parte de la plantilla puedo aumentar el ancho de mi blog ??
una vez lo intente pero la alargue los post y no la kabezera y todo se deformo agardecere tu respuesta.
Saludos.

Responder
Gem@

Bien vamos allá...
Debes situarte en plantilla edición de HTML y buscar:
#header-wrapper {
width:660px;
Donde width:660px; sustitúyelo por width:900px;

Ahora busca:
#outer-wrapper {
width: 660px;
Donde width:660px; sustitúyelo por width:900px;

Seguimos buscando esta vez:
}#main-wrapper {
width: 410px;
Donde width:410px; sustitúyelo por width:610px;

Toca el turno a:
}#sidebar-wrapper {
width: 220px;
Donde width:220px; sustitúyelo por width:250px;

En #footer {
width:660px;
Donde width:660px; sustitúyelo por width:900px;

Mira en vista previa antes de guardar los cambios, y sería bueno también visionar el blog con diferente navegador para ver que tal el cambio ;)

Responder
Walter

Gema gracias por tu ayuda aora si veo mi blog en toda la pantalla.
tu ayuda me a sido muy valiosa , bueno k gente komo tu aga blogs interesantes.
Saludos

Responder
Gem@

Me alegra mucho Walter ;)

Responder
fernando reyes baños

Gracias G@ema (je, tarde pero seguro). ¡Saludos!

Responder
Gem@

Espero te resulte R.Baños ;)

Responder
Anónimo

Hola Gem@, una duda relacionada a este truco. Al intentar aplicarlo me aparece que no se puede aceptar ya que una etiqueta "div" no se puede poner dentro de "head". ¿Que podría hacer entonces?

Gracias de antemano por tu respuesta ;)

Responder
Gem@

No hay problema Alvaro, ya que no se añade dentro, sino justo antes.
No creo que lo rechace no tiene por qué ;)

Responder
Anónimo

Gem@, gracias por tu pronta respuesta, y sí, ese fue mi error, que no lo puse antes sino después, jejeje.

De nuevo gracias por la respuesta y por darnos tantos truquillos buenos para el blog. Saludos ;)

Responder
Gem@

Suele pasar Alvaro, me alegra que ya lo tengas resuelto ;)

Responder
El Gordo Cabrón

Tengo una duda un poco complicada:

Si miras mi blog: http://manitasdecerdo.blogspot.com/

hay una cosa que está hecha de un modo un poco cutre: La barra roja superior, sobre la que descansa la imagen, es en realidad un fondo de página gigante, de modo que, si un dia la página es lo muy muy larga, se repetirá.

Yo querría poder poner esta barra roja igual que está, pero vinculada a la cabecera o del modo que sea, pero que no sea un fondo de 2000x8000 pix que es lo que hay ahora y que es una solución muy macarra.

¿Sabes algún modo? si me resuelves esto te hago un monumento (uno pequeñito, que no tengo cash)

Gracias de antemano.

Responder
Gem@

No tiene por qué repetirse o estirar la imagen porque la imagen la tienes situada en el body es decir el cuerpo del blog y loq ue da la sensación de ir bajando es el main(espacio de las entradas)
Lo que si puede es a la larga hacer lenta la carga de la página ya que se trata de una imagen muy grande, puedes solucionarlo disminuyendo la imagen con algún editor y donde dice:
background-image: url('aqui tienes la imagen'); lo sustituyes por:
background:transparent url(aqui la imagen)repeat-y;
Eso hará que la imagen a pesar de ser pequeña se repita, de esa forma hará las veces de una grande.
Lo que si es casi seguro es que no ocupe de extremo a extremo del blog, la que tienes si lo hace porque al ser demasiado grande toma espacio de donde no hay, mientras que de esta forma lo tomará del que hay predeterminado en la plantilla.
Sería más precisa pero no estoy en mi ordenador y me limita mucho respecto a crear una imagen y probar yo misma lo que te estoy diciendo, si no tienes mucha prisa este fin de semana puedo probar y te digo el resultado.

Olvidaba decirte que hay un fondo también que he estado viendo online en tu plantilla , se trata de un fondo marrón ( no me preguntes por qué, es un fondo marrón que has puesto) que a simple vista no se ve pero está añadido. Lo puedes eliminar en:#header .description {
El fondo desaparecerá eliminado esto:
background-color: #996600;

Lo del monumento lo dejamos para más adelante cuando obtengamos buenos resultados jajajaja mientras tanto nos quedamos con la idea :)

Responder
El Gordo Cabrón

Gracias por la respuesta!

El fondo marrón ese se me ha quedado después de hacer pruebas... tengo que quitarlo!

El fondo pesa poco, pues aunque es muy grande la imagen, son sólo dos colores (rojo y blanco) y en un gif eso es lo más importante.

Haré la prueba de poner muchas entradas visibles a ver si se repite o no...

Responder
El Gordo Cabrón

Solucionado. Al final la cosa era bien simple.

Sólo quería poner una franja roja horizontal, así que con hacer un gif de 1 px de ancho y el alto de la franja de alto y ponerlo de fondo con el comando repeat-x ya está. Así queda como fondo y sólo se repite horizontalmente, de modo que la página podrá crecer tanto como quiera que no volverá a salir, y con un gif de medio kb.

Gracias por tu ayuda y fuente de inspiración. A veces las cosas más simples se hacen complicadas (porque mira que mi blog es simple).

Responder
Gem@

Me alegra mucho que lo resolvieras Vix! ;)

Responder
VANY

Hola Gema!
te quiero pedir alguna recomendación para mi problema.
Tengo etiquetas que tienen más de 100 entradas cada una, y muchas con más de 20 entradas. Cuando alguien revisa una etiqueta y ésta tiene más de 20 entradas, sólo le aparecen las últimas 20 y no aparece el Link para ir a Entradas más antiguas de esa etiqueta en particular. Sólo se pueden ver las antiguas clickeando en archivos.
Me gustaría mucho que me pudieses ayudar, necesito que aparezca el link para ver las entradas antiguas de las etiquetas, pero creo que mi plantilla lo tiene bloqueado. Al igual que tiene bloqueado el editor rápido, que he tratado de colocarlo pero no puedo!!

Muchas gracias de antemano.

Responder
Gem@

Hola VANY cuando dices que tiene bloqueado ¿quieres decir que lo ves pero no funciona?

Responder
FILÁ NOSOTRAS

Gem@ hice este truco y todo muy bien gracias

Responder
Gem@

Me alegra que te resultara bien, voy a ver el mail que me ha llegado ;)

Responder
Janduís Na Web

:) bom !!
que pena que é em espanhol :O

Responder
Gem@

Janduís Na Web bienvenido! hay un traductor en la sidebar, de todas formas cualquier pregunta que tengas puedes formularla :)

Responder
Jolysonic

ya agregué una marquesina en la cabecera!! Gracias.. lo probé y lo hice... ji ji... :O

Responder
Jolysonic

Hola Gem@, te agradezco mucho por tus datos tan útiles... he aprendido mucho y me he interesado cada día más en esto del blog... teng una pregunta para Tí, Es posible dar un orden propio a las etiquetas? es que por defecto te da la opcion de orden alfaetico u orden de frecuencia pero yo quiero dar un orden propio... es posible?... gracias y perdón por preguntar en este post pero es que te quería agradecer lo de la cabecera decorativa y a la vez hacer la pregunta... gracias!!! :D

Responder
Gem@

Saludos Iglesia Bautista Roca Eterna, se puede dar el orden propio si lo creamos con html, es decir crear unos enlaces de forma que le añadimos estilos y el orden que deseemos.
Pero no será el mismo efecto que el proporcionado por Blogger.

Responder
Ami~

Gem@, ¿recuerdas que usé este ejemplo para la imagen decorativa que usé en mi head?
Bueno, resulta que también lo apliqué en el footer de blog.

Ahora, fuera de eso, un problema apareció luego de que borré un widget de la sidebar de la derecha. Las barritas se corrieron. Puedo volver a ubicarlas con un margin -8px, ya sea para el top o el bottom, pero no para los lados, siempre me queda un espacio sin rellenar.
No tengo idea de porqué pasa esto sólo con borrar un widget (que era una encuesta de polkit). Resulta que vuelvo a poner la plantilla que tenía el widget y lo elimino desde esa misma plantilla (porque ya no necesito la encuesta), y las barritas se corren :(
¿Qué podrá ser?
Gracias de antemano :D

Responder
Gem@

:: No había visto tu comentario Ami :S
He mirado la barra y la veo centrada, de todas formas en los estilos de la barra está con width:100%; conforme disminuyas o aumentes ese valor la barra se irá extendido hacia la derecha.

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top